<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        body {
            margin: 0;
        }

        .wrapper {
            width: 600px;
            height: 900px;
            background-color: #f0f0f0;
            padding: 20px 20px;
        }

        .message-box {
            height: 230px;
        }
        .message-box textarea {
            width: 600px;
            height: 160px;
            resize: none;
            font-size: 30px;
            outline: none;
            border: 1px solid pink;
        }
        .message-box button {
            width: 150px;
            height: 40px;
            cursor: pointer;
            border: 1px solid pink;
            background-color: #fff;
            cursor: pointer;
        }

        .list-box ul li {
            width: 600px;
            height: 80px;
            background-color: #fff;
            font-size: 20px;
            padding: 10px 15px;
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>


    
     <!-- 不要使用form标签 代替.wrapper标签-->
    <div class="wrapper">
        <!-- 消息区域 -->
        <div class="message-box">
            <textarea class="message-box-input" placeholder="请输入"></textarea>
            <button class="message-box-button">发布</button>
        </div>

        <!-- 列表区域 -->
        <div class="list-box">
            <ul>
                <!-- <li><span>xxxx</span></li> -->
            </ul>
        </div>
    </div>

    <script>
        // 要求：
            // 把输入域的内容，渲染在列表区域当中

        // 思考：
            // 需要控制哪些标签（输入域textarea，按钮button，列表ul）
            // 如何把输入的值获取并且渲染在页面上

        // 编码：
            // 1.0 获取相关的标签
            var mbInput = document.querySelector(".message-box-input");
            var mbButton = document.querySelector(".message-box-button");
            var listBoxEl = document.querySelector(".list-box ul");

            // 2.0 事件绑定
            mbButton.onclick = function(){
                // 3.0 书写处理逻辑
                var v1 = mbInput.value;
                // console.log("输入的值:",v1,"字符串长度:",v1.length);
                // 判断输入域是否有值
                if(v1.length == 0) {
                    console.log("输入域不能为空!");
                    // 终止代码
                    return ;
                }
                // console.log("test");
                // 渲染输入的值
                var str = "<span>"+v1+"</span>";
                // 创建li标签
                var liCreate = document.createElement("li");
                // 填充文本
                liCreate.innerHTML = str;
                // 添加li标签
                listBoxEl.appendChild(liCreate);
                // 重置输入域
                mbInput.value = "";
            }


            // 总结：   
                // 熟练掌握dom编程提供的API
                // 遇到任何的业务逻辑，先淡定，要学会思考
                // 第一步： 控制哪些元素（相关元素）
                // 第二步： 如果存在交互的行为，考虑事件绑定（行为）
                // 第三步： 书写程序的业务逻辑(判断语句，循环语句、、、)

        
    </script>
</body>
</html>